<template>
  <view class="container">
    <view class="header">
      <navbar title="发布" titleColor="white" :isShowIcon="false"></navbar>
    </view>
    <view class="body">
      <view class="item-box">
        <view class="item">
          <text>姓名</text>
          <view class="item-right">
            <input class="input" v-model="form.username" type="text" placeholder="请输入姓名">
          </view>
        </view>

        <view class="item">
          <text>手机号码</text>
          <view class="item-right">
            <input class="input" v-model="form.phone" type="text" placeholder="请输入手机号码">
          </view>
        </view>
        <view class="item">
          <text>物品类型</text>
          <view class="item-right">
            <input class="input" v-model="form.materialType" type="text" placeholder="请选择物品类型">
            <!-- <image src="/static/images/Vector@2x.png" mode=""></image> -->
          </view>
        </view>
        <view class="item">
          <text>出发地</text>
          <view class="item-right">
            <input class="input" v-model="form.departure" type="text" placeholder="请输入出发地">
            <!-- <image src="/static/images/Vector@2x.png" mode=""></image> -->
          </view>
        </view>
        <view class="item">
          <text>目的地</text>
          <view class="item-right">
            <input class="input" v-model="form.destination" type="text" placeholder="请输入目的地">
            <!-- <image src="/static/images/Vector@2x.png" mode=""></image> -->
          </view>
        </view>
        <view class="item">
          <text>备注信息</text>
          <view class="item-right">
            <input class="input" v-model="form.remark" type="text" placeholder="请输入备注信息">
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <FooterBottom @onclick="submit"></FooterBottom>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          type: '3',
          username: '',
          phone: '',
          materialType: '',
          departure: '',
          destination: '',
          remark: '',
        }
      };
    },

    methods: {
      async submit() {
        for (const key in this.form) {
          if (!this.form[key] && key != 'remark') return uni.showToast({
            title: '请完善表单',
            icon: 'none'
          })
        }
        const res = await uni.gRequest.post('/app/demand/add', this.form)
        // console.log(res);
        if (res.msg != '操作成功') return uni.showToast({
          title: '提交失败，请稍后重试！',
          icon: 'none'
        })
        if (res.msg == '操作成功') {
          uni.showToast({
            title: '提交成功',
            icon: 'success'
          })
        }
        this.form = {
          type: '3',
          username: '',
          phone: '',
          materialType: '',
          departure: '',
          destination: '',
          remark: '',
        }
      }
    }
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }

  .container {
    height: 100%;
  }

  .header {
    height: 286rpx;
    background-color: #fd5d29;

    text {
      display: block;
      width: 750rpx;
      text-align: center;
      font-size: 36rpx;
      color: #FFFFFF;
    }
  }

  .body {
    background-color: white;
    padding: 30rpx;
    border-radius: 30rpx 30rpx 0 0;
    margin-top: -40rpx;
  }

  .item-box {
    padding: 0 20rpx;
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx #eee solid;
    padding: 30rpx 0;
    font-size: 28rpx;
    color: #000000;

    &:last-child {
      border-bottom: none;
    }

    .item-right {
      position: relative;
      flex: 1;
      // justify-content: flex-end;

      image {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 12rpx;
        height: 22rpx;
      }

      .input {
        text-align: right;
        padding: 0 60rpx 0 40rpx;
      }
    }
  }

  .footer {
    // padding: 0 70rpx;
    margin-top: 60rpx;

    // .submit-button {
    //   background: linear-gradient(90deg, #FC470F 0%, #FE7C4F 100%);
    //   border-radius: 60rpx 60rpx 60rpx 60rpx;
    //   padding: 20rpx 0;
    //   color: white;
    //   text-align: center;
    // }
  }
</style>
